<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>职工培训管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../layuimini/lib/layui-v2.5.5/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../layuimini/css/public.css" media="all" />
</head>

<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <fieldset class="table-search-fieldset">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">职工选择</label>
                            <div class="layui-input-inline">
                                <select name="personalId" id="selectPersonal" lay-filter="selectPersonal">
                                    <option value="0">请选择职工</option>
                                </select>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">选择日期</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="searchTrainDate" autocomplete="off" class="layui-input" />
                                    <input type="hidden" name="beginDate" id="searchBeginDate" />
                                    <input type="hidden" name="endDate" id="searchEndDate" />
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                    lay-filter="data-search-btn">
                                    <i class="layui-icon layui-icon-search"></i> 搜 索
                                </button>
                            </div>
                            <div class="layui-inline">
                                <a type="button" class="layui-btn layui-btn-primary" id="data-reset-btn">
                                    <i class="layui-icon"></i> 重 置
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>

            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm layui-btn-sucess" lay-event="refresh">
                        刷新
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="export">
                        导出全部数据
                    </button>
                </div>
            </script>

            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

            <div class="layui-row layui-col-space15">
                <div class="layui-col-xs12 layui-col-md6">
                    <div id="Sign-Charts" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
                </div>
                <div class="layui-col-xs12 layui-col-md6">
                    <div id="Sign-Pie-Charts" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="../layuimini/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="../layuimini/js/lay-config.js" charset="utf-8"></script>
    <script>
        var tableIns
        layui.use(
            ['layer', 'form', 'table', 'laydate', 'common', 'excel', 'echarts'],
            function (args) {
                var $ = layui.jquery,
                    form = layui.form,
                    laydate = layui.laydate,
                    table = layui.table,
                    common = layui.common,
                    excel = layui.excel
                var today = new Date()
                var today_str = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate()
                console.log(today_str)

                tableIns = table.render({
                    elem: '#currentTableId',
                    url: common.api + '/attendanceout/attendanceout/list2',
                    where: {
                        token: common.getToken,
                        beginDate: today_str,
                        endDate: today_str
                    },
                    toolbar: '#toolbarDemo',
                    title: '签到信息',
                    limits: [1, 5, 10, 15, 20],
                    limit: 15,
                    page: true,
                    skin: 'row',
                    even: true,
                    cols: [
                        [{
                                field: 'personId',
                                title: '员工ID',
                                minWidth: 150,
                                sort: true,
                                align: 'center',
                            },
                            {
                                field: 'name',
                                title: '员工名称',
                                minWidth: 150,
                                sort: true,
                                align: 'center',
                            },
                            {
                                field: 'date',
                                minWidth: 150,
                                title: '日期',
                                align: 'center',
                            },
                            {
                                field: 'time',
                                minWidth: 150,
                                title: '签到时间',
                                sort: true,
                                align: 'center',
                            },
                            {
                                field: 'status',
                                minWidth: 150,
                                title: '打卡状态',
                                align: 'center',
                                templet: function (data) {
                                    switch (data.status) {
                                        case 0:
                                            return "规定时间下班"
                                        case 1:
                                            return "加班"
                                        case 2:
                                            return "加班"
                                    }
                                }
                            }
                        ],
                    ],
                    parseData: function (res) {
                        console.log(res)
                        if (res.code != 200) {
                            common.login()
                        }
                        return {
                            code: res.code, //解析接口状态
                            msg: res.msg, //解析提示文本
                            count: res.data.total, //解析数据长度
                            data: res.data.list, //解析数据列表
                        }
                    },
                    response: {
                        statusCode: 200, //重新规定成功的状态码为 200，table 组件默认为 0
                    },
                    request: {
                        pageName: 'page', //页码的参数名称，默认：page
                        limitName: 'size', //每页数据量的参数名，默认：limit
                    },
                })

                // 监听搜索操作
                form.on('submit(data-search-btn)', function (data) {
                    var param = data.field
                    console.log(param)
                    console.log(data)
                    // 执行搜索重载
                    tableIns.reload({
                        url: common.api + '/attendance/attendance/list2',
                        method: 'get',
                        where: param,
                    })
                    return false
                })

                //监听工具栏添加删除刷新
                table.on('toolbar(currentTableFilter)', function (obj) {
                    if (obj.event === 'refresh') {
                        tableIns.reload({
                            url: common.api + '/attendance/attendance/list2',
                            where: {},
                        })
                    } else if (obj.event === 'export') {
                        common.ajax(common.api + '/attendance/attendance/all', null, function (res) {
                            var data = res.data
                            data = common.compare(data)
                            console.log(data)
                            data = excel.filterExportData(data, [
                                'personId',
                                'date',
                                'time',
                                'status',
                            ])
                            console.log(data)
                            data.unshift({
                                personId: '职工id',
                                date: '日期',
                                time: '打卡时间',
                                status: '当日出勤情况',
                            })
                            var timestart = Date.now()
                            excel.exportExcel({
                                    sheet1: data,
                                },
                                '签到信息.xlsx',
                                'xlsx'
                            )
                            var timeend = Date.now()

                            var spent = (timeend - timestart) / 1000
                            layer.msg('单纯导出耗时 ' + spent + ' s')
                        })
                    }
                })

                var selectData, personalDate
                layer.ready(function () {
                    common.ajax(common.api + '/personal/select', null, function (data) {
                        personalDate = data.data
                        $.each(personalDate, function (index, item) {
                            var option = new Option(item.name, item.id)
                            $('#selectPersonal').append(option)
                        })
                        form.render('select')
                    })
                    // 监听重置操作
                    $('#data-reset-btn').click(function () {
                        $('#selectId').val(0)
                        $('#selectPersonal').val(0)
                        form.render('select')
                        tableIns.reload({
                            url: common.api + '/attendance/attendance/list2',
                            method: 'get',
                            where: {
                                personalId: 0,
                                beginDate: today_str,
                                endDate: today_str,
                            },
                        })
                    })
                    //加载日期
                    laydate.render({
                        elem: '#searchTrainDate',
                        range: true,
                        done: function (value) {
                            var date = value.split(' - ')
                            $('#searchBeginDate').val(date[0])
                            $('#searchEndDate').val(date[1])
                        },
                    })
                })

            }
        )
    </script>
</body>

</html>